<%--
  Created by IntelliJ IDEA.
  User: 12701
  Date: 2024/9/2
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="Medicamp Responsive Bootstrap Template">
      <meta name="keywords" content="Pixel">
      <meta name="author" content="rkwebdesigns">
      <title>挂号</title>
      <link href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh1/bootstrap.min.css" rel="stylesheet">
      <link href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh1/bootstrap-dropdownhover.min.css" rel="stylesheet">
      <!-- Fonts Awesome -->
      <link href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh1/font-awesome.min.css" rel="stylesheet">
      <!-- Google Fonts -->
      <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,800italic,800,600italic,600,400italic,700,700italic' rel='stylesheet' type='text/css'>
      <!-- animate Effect -->
      <link href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh1/animate.css" rel="stylesheet">
      <!-- Main CSS -->
      <link href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh1/style.css" rel="stylesheet">
      <!-- Responsive CSS -->
      <link href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh1/responsive.css" rel="stylesheet">


      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!--====== Bootstrap css ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/bootstrap.min.css">
      <!--====== Favicon Icon ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/all.min.css">
      <!--====== Bootstrap Icon ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/font-css.css">
      <!--====== Odometer css ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/odometer.css">
      <!--====== Swiper css ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/swiper-bundle.min.css">
      <!--====== Main Css ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/style.min.css">
      <!--====== Responsive Css ======-->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css_wjh/css_wjh2/responsive.css">
  </head>
  <body>
  <section id="inner-title" class="inner-title">
      <div class="container">
          <div class="row">
              <div class="col-md-6 col-lg-6">
                  <h2>预约挂号</h2>
              </div>
              <div class="col-md-6 col-lg-6">
                  <div class="breadcrumbs">
                      <ul>
                          <li>当前页:</li>
                          <li><a href="">挂号</a></li>
                          <li><a href="">预约挂号</a></li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <!-- Appoinment-form start-->
  <div class="medikia__appoinment-form section-gap">
      <div class="container">
          <div class="row">
                  <div class="appoinment-box">
                      <form action="${pageContext.request.contextPath}/register/addRegister.do" method="post" class="medikia__applyform" >
                          <div class="medikia__appointment">
                              <div class="row">
                                  <input type="hidden" id="records_number" name="records_number">
                                  <input type="hidden" id="id" name="id" value="${patient.id}">
                                  <input type="hidden" id="patient_id" name="patient_id" value="${patient.id}">
                                  <input type="hidden" id="status" name="status" value="未签到">
                                  <input type="hidden" id="seek" name="seek" value="未就诊">
                                  <div class="col-lg-12">
                                      姓名:
                                      <input type="text" id="user_name" name="user_name" class="form-control medikia__bg-white paitent-name-field" value="${patient.name}">
                                  </div>
                                  <div class="col-lg-6">
                                      性别:
                                      <input type="text" id="user_sex" name="user_sex"  class="form-control medikia__bg-white paitent-name-field" value="${patient.sex}">
                                  </div>
                                  <div class="col-lg-6">
                                      年龄:
                                      <input type="text" id="user_age" name="user_age" class="form-control medikia__bg-white phone-number-field" value="${patient.age}">
                                  </div>

                                  <div class="col-lg-12">
                                      选择科室:
                                      <span class="form-control-wrap your-country">
                                              <select id="department" name="department" class="form-select" aria-invalid="false" >
                                                  <option value="">请选择科室</option>
                                              </select>
                                          </span>
                                  </div>
                                  <div class="col-lg-12">
                                      预约时间:
                                      <input type="date" id="date" name="date" class="form-control medikia__bg-white time-field" aria-invalid="false">
                                  </div>
                                  <div class="col-lg-12">
                                     选择医生:
                                          <span class="form-control-wrap your-country">
                                              <select id="doctor_name" name="doctor_name" class="form-select" aria-invalid="false">
                                                  <option value="">请选择医生</option>
                                              </select>
                                          </span>
                                  </div>
                                  <div class="col-lg-6">
                                      挂号费:
                                      <input type="text" id="register_fee" name="register_fee" class="form-control medikia__bg-white phone-number-field" value="${doctor.register_fee}" readonly>
                                  </div>

                                  <div class="col-lg-12">
                                      <button type="submit" class="medikia__button btn-primary btn-fill--up">
                                          <span>预约并支付</span>
                                      </button>
                                      <button type="button" onclick="cancel()" class="medikia__button btn-primary btn-fill--up">
                                          <span>取消</span>
                                      </button>
                                  </div>
                              </div>
                          </div>
                      </form>
                  </div>
          </div>
      </div>
  </div><!-- Appoinment-form End-->


  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/jquery.plugin.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/jquery.isotope.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/jquery.magnific-popup.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/bootstrap-dropdownhover.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/wow.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/waypoints.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/jquery.counterup.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh1/main.js"></script>
  <!-- script start  -->
  <!--====== Jquery ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/jquery.min.js"></script>
  <!--====== Bootstrap ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/bootstrap.bundle.min.js"></script>
  <!--====== Viewport slider ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/viewport.jquery.js"></script>
  <!--====== Slick slider ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/slick.min.js"></script>
  <!--====== Swiper slider ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/swiper-bundle.min.js"></script>
  <!--====== Odometer JS ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/odometer.min.js"></script>
  <!--====== GDPR JS ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/medikia-gdpr.min.js"></script>
  <!--====== Main JS ======-->
  <script src="${pageContext.request.contextPath}/static/js/js_wjh/js_wjh2/script.js"></script>
  <!-- script End  -->

  <script>

      function cancel() {
          var id = document.getElementById('id') ? document.getElementById('id').value : null;
          console.log("ID Value: ", id);  // Debugging line
          if (id) {
              window.location.href = "${pageContext.request.contextPath}/register/findPatientById.do?id=" + id;
          } else {
              console.error("ID is null or undefined");
          }
      }

      $(document).ready(function() {
          $.ajax({
              url: '${pageContext.request.contextPath}/register/getDepartments.do',
              type: 'POST',
              success: function(response) {
                  $('#department').empty().append('<option value="">请选择科室</option>');
                  response.department.forEach(department => {
                      $('#department').append('<option value="' + department.id + '">' + department.department_name + '</option>');
                  });
              }
          });

          $('#department').change(function() {
              const id = $(this).val();
              const selectedDate = $('#date').val();

              if (id && selectedDate) {
                  const date = new Date(selectedDate);
                  const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                  const dayOfWeek = daysOfWeek[date.getDay()];

                  // 获取当前日期，并设置时间为零点
                  const now = new Date();
                  now.setHours(0, 0, 0, 0);

                  // 比较日期
                  if (date < now) {
                      alert("预约时间已过期，请重新选择时间");
                      return;
                  }

                  $.ajax({
                      url: '${pageContext.request.contextPath}/register/getDoctors.do',
                      type: 'POST',
                      data: { date: dayOfWeek, id: id },
                      success: function(response) {
                          console.log(response);
                          $("#doctor_name").empty().append('<option value="">请选择医生</option>');
                          response.doctor_name.forEach(doctor_name => {
                              $("#doctor_name").append('<option value="' + doctor_name.name + '">' + doctor_name.name + '</option>');
                          });
                      }
                  });
              }
          });

          $('#date').change(function() {
              const id = $('#department').val();
              const selectedDate = $(this).val();

              if (id && selectedDate) {
                  const date = new Date(selectedDate);
                  const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                  const dayOfWeek = daysOfWeek[date.getDay()];

                  // 获取当前日期，并设置时间为零点
                  const now = new Date();
                  now.setHours(0, 0, 0, 0);

                  // 比较日期
                  if (date < now) {
                      alert("预约时间已过期，请重新选择时间");
                      return;
                  }

                  $('#dayOfWeek').text(dayOfWeek);

                  $.ajax({
                      url: '${pageContext.request.contextPath}/register/getDoctors.do',
                      type: 'POST',
                      data: { date: dayOfWeek, id: id },
                      success: function(response) {
                          console.log(response);
                          $("#doctor_name").empty().append('<option value="">请选择医生</option>');
                          response.doctor_name.forEach(doctor_name => {
                              $("#doctor_name").append('<option value="' + doctor_name.name + '">' + doctor_name.name + '</option>');
                          });
                      }
                  });
              }
          });

          // 监听医生选择变化
          $('#doctor_name').change(function() {
              const doctorId = $(this).val(); // 获取选择的医生ID

              if (doctorId) {
                  $.ajax({
                      url: '${pageContext.request.contextPath}/register/getFee.do', // 后端查询挂号费的接口
                      type: 'POST',
                      data: { doctorId: doctorId },
                      success: function(response) {
                          // 将查询到的挂号费填入<input>字段
                          $('#register_fee').val(response.fee);
                      },
                      error: function(xhr, status, error) {
                          console.error("Error occurred while fetching the registration fee:", status, error);
                      }
                  });
              }
          });


      })

  </script>
  </body>
</html>
